/* eslint no-undef: 0 */
/* eslint arrow-parens: 0 */
import React, { useState, useEffect } from 'react';
import { useMediaQuery } from 'react-responsive';

// 导入所有组件
import Nav0 from './Nav0';
import Nav3 from './Nav3';
import Nav2 from './Nav2';
import Content4 from './Content4';
import Content5 from './Content5';
import Content9 from './Content9';
import Content13 from './Content13';
import Content11 from './Content11';
import Content12 from './Content12';
import Contact0 from './Contact0';
import Feature1 from './Feature1';
import Feature2 from './Feature2';
import Feature6 from './Feature6';
import Feature0 from './Feature0';
import Feature7 from './Feature7';
import Feature3 from './Feature3';
import Feature4 from './Feature4';
import Feature5 from './Feature5';
import Feature8 from './Feature8';
import Pricing0 from './Pricing0';
import Pricing1 from './Pricing1';
import Pricing2 from './Pricing2';
import Teams0 from './Teams0';
import Footer0 from './Footer0';
import Footer1 from './Footer1';
import Footer2 from './Footer2';

// 导入数据源
import { 
  Nav00DataSource, 
  Nav30DataSource, 
  Nav20DataSource, 
  Content40DataSource, 
  Content50DataSource, 
  Content90DataSource, 
  Content130DataSource, 
  Content110DataSource, 
  Content120DataSource, 
  Contact00DataSource, 
  Feature10DataSource, 
  Feature20DataSource, 
  Feature60DataSource, 
  Feature00DataSource, 
  Feature70DataSource, 
  Feature30DataSource, 
  Feature40DataSource, 
  Feature50DataSource, 
  Feature80DataSource, 
  Pricing00DataSource, 
  Pricing10DataSource, 
  Pricing20DataSource, 
  Teams00DataSource, 
  Footer00DataSource, 
  Footer10DataSource, 
  Footer20DataSource 
} from './data.source';

// 导入样式
import './less/antMotionStyle.less';

const Home2 = () => {
  // 使用react-responsive检测移动设备
  const isMobile = useMediaQuery({ maxWidth: 767 });
  
  // 渲染组件数组
  const children = [
    <Nav0
      id="Nav0_0"
      key="Nav0_0"
      dataSource={Nav00DataSource}
      isMobile={isMobile}
    />,
    <Nav3
      id="Nav3_0"
      key="Nav3_0"
      dataSource={Nav30DataSource}
      isMobile={isMobile}
    />,
    <Nav2
      id="Nav2_0"
      key="Nav2_0"
      dataSource={Nav20DataSource}
      isMobile={isMobile}
    />,
    <div key="banner-placeholder" style={{height: '400px', backgroundColor: '#f0f2f5', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
      <h1>页面内容</h1>
    </div>,
    <Content4
      id="Content4_0"
      key="Content4_0"
      dataSource={Content40DataSource}
      isMobile={isMobile}
    />,
    <Content5
      id="Content5_0"
      key="Content5_0"
      dataSource={Content50DataSource}
      isMobile={isMobile}
    />,
    <Content9
      id="Content9_0"
      key="Content9_0"
      dataSource={Content90DataSource}
      isMobile={isMobile}
    />,
    <Content13
      id="Content13_0"
      key="Content13_0"
      dataSource={Content130DataSource}
      isMobile={isMobile}
    />,
    <Content11
      id="Content11_0"
      key="Content11_0"
      dataSource={Content110DataSource}
      isMobile={isMobile}
    />,
    <Content12
      id="Content12_0"
      key="Content12_0"
      dataSource={Content120DataSource}
      isMobile={isMobile}
    />,
    <Contact0
      id="Contact0_0"
      key="Contact0_0"
      dataSource={Contact00DataSource}
      isMobile={isMobile}
    />,
    <Feature1
      id="Feature1_0"
      key="Feature1_0"
      dataSource={Feature10DataSource}
      isMobile={isMobile}
    />,
    <Feature2
      id="Feature2_0"
      key="Feature2_0"
      dataSource={Feature20DataSource}
      isMobile={isMobile}
    />,
    <Feature6
      id="Feature6_0"
      key="Feature6_0"
      dataSource={Feature60DataSource}
      isMobile={isMobile}
    />,
    <Feature0
      id="Feature0_0"
      key="Feature0_0"
      dataSource={Feature00DataSource}
      isMobile={isMobile}
    />,
    <Feature7
      id="Feature7_0"
      key="Feature7_0"
      dataSource={Feature70DataSource}
      isMobile={isMobile}
    />,
    <Feature3
      id="Feature3_0"
      key="Feature3_0"
      dataSource={Feature30DataSource}
      isMobile={isMobile}
    />,
    <Feature4
      id="Feature4_0"
      key="Feature4_0"
      dataSource={Feature40DataSource}
      isMobile={isMobile}
    />,
    <Feature5
      id="Feature5_0"
      key="Feature5_0"
      dataSource={Feature50DataSource}
      isMobile={isMobile}
    />,
    <Feature8
      id="Feature8_0"
      key="Feature8_0"
      dataSource={Feature80DataSource}
      isMobile={isMobile}
    />,
    <Pricing0
      id="Pricing0_0"
      key="Pricing0_0"
      dataSource={Pricing00DataSource}
      isMobile={isMobile}
    />,
    <Pricing1
      id="Pricing1_0"
      key="Pricing1_0"
      dataSource={Pricing10DataSource}
      isMobile={isMobile}
    />,
    <Pricing2
      id="Pricing2_0"
      key="Pricing2_0"
      dataSource={Pricing20DataSource}
      isMobile={isMobile}
    />,
    <Teams0
      id="Teams0_0"
      key="Teams0_0"
      dataSource={Teams00DataSource}
      isMobile={isMobile}
    />,
    <Footer0
      id="Footer0_0"
      key="Footer0_0"
      dataSource={Footer00DataSource}
      isMobile={isMobile}
    />,
    <Footer1
      id="Footer1_0"
      key="Footer1_0"
      dataSource={Footer10DataSource}
      isMobile={isMobile}
    />,
    <Footer2
      id="Footer2_0"
      key="Footer2_0"
      dataSource={Footer20DataSource}
      isMobile={isMobile}
    />,
  ];

  return (
    <div className="templates-wrapper">
      {children}
    </div>
  );
};

export default Home2;